FlutterでGoogle Fontsを使ってフォントを変更してみた（google_fonts）

#Flutter

#Dart

sora

2024.05.10

こんにちは、ゲームソリューション部のsoraです。
今回は、FlutterでGoogle Fontsを使ってフォントを変更してみた（google_fonts）ことについて書いていきます。

実装した画面

初期フォントからGoogle Fontsのフォントを使用したものに変更して表示します。

利用するパッケージやサイト

google_fonts

google_fonts | Flutter package
使用したバージョン：google_fonts 6.2.1
Google Fontsを利用するためのパッケージです。
assets内にフォントファイルが存在する場合はオフラインでも使用できますが、そうでない場合はHTTPで取得するためオフラインの場合は使用できません。

Google Fonts

Googleが提供しているWebフォントのサービスです。
世界中のフォントが存在して、全て無料で利用可能です。
Browse Fonts - Google Fonts

google_fontsパッケージを利用したフォント変更

textThemeとしてGoogle Fontsのフォントを指定するだけで、アプリ全体のフォントを変更することができます。
GoogleFonts以降の部分については、GoogleFontsをctrl（Macならcomand）を押しながらクリックすることで、設定ファイルから探すことができます。
タイトルを表示一覧としているのは、デフォルトフォントの"覧"という漢字の表記に違和感があって、フォント変更をしようと思ったためです。（変化がわかりやすいです）

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

// main
void main() {
  runApp(
    const MyApp(),
  );
}

class MyApp extends StatelessWidget   {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlueAccent),
        useMaterial3: true,
        // textThemeでアプリ全体のフォントを変更する
        textTheme: GoogleFonts.ibmPlexSansJpTextTheme(
          Theme.of(context).textTheme,
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

var decorationTextStyle = const TextStyle(
  fontSize: 60.0,
);

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('表示一覧'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('ひらがな', style: decorationTextStyle),
            Text('カタカナ', style: decorationTextStyle),
            Text('漢字', style: decorationTextStyle),
            Text('English', style: decorationTextStyle)
          ],
        ),
      ),
    );
  }
}

フォントファイルをダウンロードしてフォント変更

アプリの本番リリース時には、通信ができない場所でもフォントを使用できるように、assetsとしてフォントファイルを含めてフォントを変更します。
Google Fontsから好きなフォントを選択してダウンロードして、ttfファイルやotfファイルをassetsフォルダに配置します。
pubspec.yamlでフォントを読み込むことで使用できます。

## 抜粋
flutter:
  uses-material-design: true
  fonts:
    - family: Noto Sans JP
      fonts:
      - asset: assets/fonts/NotoSansJP-Regular.ttf
## 抜粋

// 抜粋
class MyApp extends StatelessWidget   {
    const MyApp({super.key});
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlueAccent),
          useMaterial3: true,
          // フォントの指定
          fontFamily: 'Noto Sans JP'
        ),
        home: const MyHomePage(),
      );
    }
  }
// 抜粋